﻿
@{
    ViewData["Title"] = "角色首页";
    Layout = "~/Views/Shared/_LayoutTable.cshtml";
}
<div class="row">
    <div class="col-sm-12">
        <div class="ibox">
            <div class="ibox-title">
                <div class="input-group" style="max-width:250px;display:inline-table;">
                    <input type="text" id="txt_Keyword" class="form-control input-sm">
                    <span class="input-group-btn">
                        <a id="btn_Search" class="btn btn-white btn-sm"><i class="fa fa-search"></i></a>
                    </span>
                </div>
                <div class="ibox-tools">
                    <div class="btn-group">
                        <a class="btn btn-white btn-sm" onclick="roleIndex.create()"><i class="fa fa-plus"></i> 新增</a>
                        <a class="btn btn-white btn-sm" onclick="roleIndex.edit()"><i class="fa fa-pencil"></i> 编辑</a>
                        <a class="btn btn-white btn-sm" onclick="roleIndex.delete()"><i class="fa fa-trash-o"></i> 删除</a>
                    </div>
                    <div class="btn-group">
                        <a class="btn btn-white btn-sm" onclick="roleIndex.authen()"><i class="fa fa-bookmark-o"></i> 角色授权</a>
                    </div>
                </div>
            </div>
            <div class="ibox-content">
                <div class="jqGrid_wrapper">
                    <table id="gridTable"></table>
                    <div id="gridPager"></div>
                </div>
            </div>
        </div>
    </div>
</div>
@section scripts{
    <script type="text/javascript">
        var roleIndex = function () {
            var _self = this;
            //初始化页面
            _self.InitialPage = function () {
                //resize重设(表格、树形)宽高
                $(window).resize(function (e) {
                    window.setTimeout(function () {
                        $('#gridTable').setGridWidth(($('.jqGrid_wrapper').width()));
                        $("#gridTable").setGridHeight($(window).height() - 208);
                    }, 200);
                    e.stopPropagation();
                });
            }
            _self.GetGrid = function () {
                var selectedRowIndex = 0;
                $.jgrid.defaults.styleUI = "Bootstrap";
                var $gridTable = $('#gridTable');
                $gridTable.jqGrid({
                    url: '@Url.Action("GetPageList")',
                    datatype: "json",
                    height: $(window).height() - 208,
                    autowidth: true,
                    colModel: [
                        { label: 'id',name: 'id', index: 'id', width: 60, key: true, hidden: true },
                        { label: '角色名称', name: 'name', index: 'name', width: 60 },
                        { label: '角色描述', name: 'description', index: 'description', width: 100 }
                    ],
                    rowNum: 30,
                    rowList: [30, 50, 100],
                    pager: "#gridPager",
                    rownumbers: true,
                    viewrecords: true,
                    onSelectRow: function () {
                        selectedRowIndex = $("#" + this.id).getGridParam('selrow');
                    },
                    gridComplete: function () {
                        $("#" + this.id).setSelection(selectedRowIndex, false);
                    }
                });

                //查询事件
                $("#btn_Search").click(function () {
                    $gridTable.jqGrid('setGridParam', {
                        postData: { keywords: $("#txt_Keyword").val() }, page: 1
                    }).trigger('reloadGrid');
                });
                //查询回车
                $('#txt_Keyword').bind('keypress', function (event) {
                    if (event.keyCode == "13") {
                        $('#btn_Search').trigger("click");
                    }
                });
            }


            return {
                init: function () {
                    _self.InitialPage();
                    _self.GetGrid();
                },
                create: function () {
                    dialogOpen({
                        id:'form',
                        title: '添加角色',
                        width: '450px',
                        height: '266px',
                        url: '@Url.Action("Form")',
                        callBack: function (iframe) {
                            iframe.roleForm.acceptClick();
                        }
                    });
                },
                edit: function () {
                    var id = $("#gridTable").jqGridRowValue("id");
                    if (id) {
                            dialogOpen({
                            id:'form',
                            title: '编辑角色',
                            width: '450px',
                            height: '266px',
                            url: '@Url.Action("Form")?id=' + id,
                            callBack: function (iframe) {
                                iframe.roleForm.acceptClick();
                            }
                        });
                    }
                    else {
                        dialogMsg("请选择需要编辑的角色！", 3);
                        return false;
                    }

                },
                delete: function () {
                    var id = $("#gridTable").jqGridRowValue("id");
                    if (id) {
                        $.RemoveForm({
                            url: "RemoveForm",
                            param: { id: id },
                            success: function (data) {
                                $("#gridTable").trigger("reloadGrid");
                            }
                        });
                    } else {
                        dialogMsg("请选择需要删除的角色！", 3);
                        return false;
                    }
                },
                authen: function () {
                    var id = $("#gridTable").jqGridRowValue("id");
                    if (id) {
                            dialogOpen({
                            id:'form',
                            title: '角色授权',
                            width: '450px',
                            height: '600px',
                            url: '@Url.Action("AuthenRoleMenuForm")?roleId=' + id,
                            callBack: function (iframe) {
                                iframe.authenRoleForm.acceptClick();
                            }
                        });
                    }
                    else {
                        dialogMsg("请选择需要授权的角色！", 3);
                        return false;
                    }
                }
            }
        }();
        roleIndex.init();
    </script>
}
